<template>
<div class="content">
  <header>
    <div v-html="dataShowData.index_top[0]"></div>
  </header>
  <div class="list">
    <ul>
      <li v-for="item in dataShowData.ktv">
        <div class="cl">
          <b>{{item.ktv_name}}</b>
        </div>
        <div class="cr">
          <dl>
            <router-link tag="dd" :to="{name:'egg',query:{coupid:items.coupid,ktvid:items.ktvid}}" v-for="items in item.coupon">
              <div class="text">
                <b>{{items.coup_name.split("<")[0]}}</b>
                <p>{{items.coup_name.split(">")[1]}}</p>
              </div>
              <button class="btn">我要抢</button>
            </router-link>
          </dl>
        </div>
      </li>
    </ul>
  </div>
  <footer>
    <div v-html="dataShowData.index_bottom[0]"></div></footer>
</div>
</template>

<script>
export default{
  data:()=>{
    return{
      dataShowData:''
    }
  },
  mounted(){
    this.dataShowFn();
  },
  methods:{
    dataShowFn(){
      this.http(this.api.main,{
        type:this.$route.params.type
      }).then(res=>{
        switch(parseInt(res.data.ret,10)){
          case 0:
            this.dataShowData=res.data.data;
            break;
          default:
            Toast(res.data.msg);
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.content{
  background-color:#004098;
  overflow:auto;
  header,footer{
    img{
      width:100%;
    }
  }
  .list{
    margin:0 28px;
    ul{
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li{
        width:340px;
        margin-bottom:20px;
        background:url('~@img/winList_list.png') center top repeat-y;
        background-size:100% auto;
        display:flex;
        position:relative;
        overflow:hidden;
        &:before,&:after{
          content:'';
          position:absolute;
          left:109px;
          width:30px;
          height:30px;
          background-color:#004098;
          border-radius:50%;
          border:7px solid #FFF;
        }
        &:after{
          top:-23px;
        }
        &:before{
          bottom:-23px;
        }
        .cl{
          width:130px;
          display:flex;
          border-right:2px dashed #a59a8e;
          b{
            margin:auto;
            width:4.5em;
            font-size:26px;
          }
        }
        .cr{
          flex:1;
          margin-left:2px;
          margin-right:15px;
          dl{
            dd{
              font-size:24px;
              height:98px;
              display:flex;
              align-items:center;
              border-bottom:5px solid #e70012;
              &:last-child{
                border-bottom:0;
              }
              .text{
                flex:1;
                line-height:1.5;
              }
              .btn{
                font-size:0;
                width:54px;
                height:54px;
                background:url('~@img/winList_btn.jpg');
                background-size:100% 100%;
                margin-right:5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
